<template>
    <div class="case-table-container">
        <div class="action-bar">
            <el-button type="primary" @click="refreshData">刷新数据</el-button>
        </div>
        
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="50" />
            <el-table-column prop="case_name" label="所属测试用例" align="center" />
            <el-table-column prop="execute_time" label="执行时间" align="center" />
            <el-table-column prop="report_create_time" label="报告生成时间" align="center" />
            <el-table-column label="报告URL" align="center" width="200">
                <template #default="scope">
                    <el-link 
                        v-if="scope.row.report_url" 
                        type="primary" 
                        :href="scope.row.report_url" 
                        target="_blank"
                    >
                        查看报告
                    </el-link>
                    <span v-else>无报告</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" @click="viewReport(scope.row)">查看报告</el-button>
                    <el-button type="danger" @click="deleteReport(scope.row)" :disabled="!scope.row.report_url">
                        删除报告
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

const reportBaseUrl = ref('http://127.0.0.1:8000');
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取报告数据
function getReportData() {
    axios.get(`${reportBaseUrl.value}/apiautomation/apiList`, {
        params: {
            page: currentPage.value,
            pagesize: pageSize.value
        }
    })
    .then(res => {
        if (res.data.status === 200) {
            // 处理数据：确保时间格式统一
            const processedData = res.data.data.map(item => ({
                ...item,
                execute_time: item.execute_time || '未记录',
                report_create_time: item.report_create_time || '未生成',
                // 确保报告URL是完整路径
                report_url: item.report_url ? 
                    `${reportBaseUrl.value}${item.report_url}` : 
                    null
            }));
            tableData.value = processedData;
            total.value = res.data.total || 0;
        } else {
            ElMessage.error(res.data.message || '获取数据失败');
        }
    })
    .catch(err => {
        console.error('数据获取错误:', err);
        ElMessage.error('网络错误，请稍后再试');
    });
}

// 刷新数据
function refreshData() {
    getReportData();
    ElMessage.success('数据刷新成功');
}

// 查看报告
function viewReport(report) {
    if (report && report.report_url) {
        window.open(report.report_url, '_blank');
    } else {
        ElMessage.error('未找到对应的报告或报告路径错误');
    }
}

// 删除报告
function deleteReport(report) {
    ElMessageBox.confirm(
        '确定要删除此报告吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
    .then(() => {
        // 调用删除用例接口，因为删除用例会同时删除关联的报告
        axios.delete(`${reportBaseUrl.value}/apiautomation/delete/${report.id}/`)
        .then(res => {
            if (res.data.status === 200) {
                ElMessage.success('报告删除成功');
                getReportData();
            } else {
                ElMessage.error(res.data.message || '删除失败');
            }
        })
        .catch(err => {
            console.error('删除错误:', err);
            ElMessage.error('删除失败，请重试');
        });
    })
    .catch(() => {
        // 用户取消操作
    });
}

// 分页处理
function handleSizeChange(size) {
    pageSize.value = size;
    getReportData();
}

function handleCurrentChange(page) {
    currentPage.value = page;
    getReportData();
}

onMounted(() => {
    getReportData();
});
</script>

<style scoped>
.case-table-container {
    padding: 20px;
}
.action-bar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.el-link {
    margin-right: 10px;
}
</style>